<!DOCTYPE html>
<html>
<head>
    <title>{$site_name}-蓝图</title>
    <meta name="keywords" content="日新圆桌 日新分享课 日新研习社"/>
    <meta name="description" content="日新网―让新生活更近一点，让科技落地更从容一点。旗下拥有创新行业资讯日新网、
            创新专业培训日新研习社、创新企业孵化成长日新商脉三款产品，以住宅、商业地产、
            写字楼等不同业态物业经营的增效减能与增值创新以及服务标准化、
            物业智能化、信息化等策略方向的创新为主要研究内容，共同助力日新网成为物业行业创新风向标。">
    <meta name="author" content="rixin">
    <meta name="referrer" content="origin">
    <tc_include file="Public:head"/>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
            line-height: 1;
        }
        body {
            color: #333333;
            font-size: 16px;
            padding-top: 56px!important;
        }
        .main img {
            width: 100%;
            height: 100%;
        }
        a{text-decoration:none;color: #333;}
        a:link{color: #333;}
        a:hover{color: #333;}
        a:visited{color: #333;}
        .clearfix:after{visibility: hidden; display: block; font-size: 0; content: " "; clear:both; height: 0; }
        .clearfix{zoom:1;}
        .moretext1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:1; overflow: hidden; text-overflow: ellipsis}
        .moretext2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow: hidden; text-overflow: ellipsis}
        .moretext4 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:4; overflow: hidden; text-overflow: ellipsis}
        .moretext5 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:5; overflow: hidden; text-overflow: ellipsis}
        .main{
            min-height: 100%;
            width: 1198px;
            margin: 60px auto;
        }
        .main .top-img {
            position: relative;
            width: 100%;
            height: 188px;
        }
        .main .top-img img {
            display: block;
            width: 100%;
            height: 100%;
        }
        .main .top-img .title {
            position: absolute;
            top: 64px;
            left: 328px;
            width: 580px;
            font-size: 40px;
            line-height: 44px;
            color: #ffffff;
        }
        .main .top-img1{
            width: 184px;
            height: 100%;
            margin-right: 14px;
        }
        .main .top-img2 {
            width: 1000px;
            height: 240px;
            background-color: #f7f9ff;
        }
        .main .top-img2 .text-content{
            position: absolute;
            top: 32px;
            left: 32px;
            width: 936px;
            height: 240px;
        }
        .main .top-img2 .text-content .text {
            height: 120px;
            font-size: 16px;
            line-height:24px;
            margin-top: 28px;

        }
        .main .top-img2 .text-content .name {
            font-size: 24px;
            line-height: 24px;
            color: #000232;
            letter-spacing: 2px;
            font-weight: bolder;
        }
        .special-content {
        }
        .special-content .tab{
            float: left;
            width: 150px;
            height: 316px;
            margin-top: 45px;
            border-right: 1px solid rgba(0,2,50,0.2);
            text-align: right;
            padding-right: 34px;
            color: #000232;
            letter-spacing: 2px;
            font-weight: bolder;
        }
        .special-content .tab.active{
            position: fixed;
            top: 56px;
        }
        .special-content .tab-item {
            position: relative;
            height: 20px;
            line-height: 20px;
            margin-bottom: 32px;
        }
        .special-content .tab-item.active{
            font-size: 20px;
        }
        .special-content .tab-item.active:after{
            position: absolute;
            top: 6px;
            right: -38px;
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #000232;
        }
        .special-content .special-group {
            float: right;
            width: 946px;
            margin-right: 24px;
        }
        .special-content .special-group .title-h3{
            font-size: 24px;
            color: #000232;
            letter-spacing: 2px;
            font-weight: bolder;
            padding: 44px 0 32px;
        }
        .special-content .course {
            margin-top: -50px;
        }
        .special-content .course-item{
            float: left;
            width: 280px;
            height: 260px;
            border: solid 1px #efefef;
            border-top-right-radius: 6px;
            border-top-left-radius: 6px;
            margin: 50px 50px 0 0;
        }
        .special-content .course-item:nth-of-type(3n){
            margin-right: 0;
        }
        .special-content .course-item .img-ground{
            height: 156px;
        }
        .special-content .course-item .img-ground img{
            width: 100%;
            height: 100%;
            border-top-right-radius: 6px;
            border-top-left-radius: 6px;
        }
        .special-content .course-item .text {
            font-size: 18px;
            letter-spacing: 2px;
            color: #333333;
            line-height: 22px;
            margin: 4px 10px 0;
        }
        .special-content .course-item .person{
            margin: 7px 10px 0;
        }
        .special-content .course-item .person img {
            width: 40px;
            height: 40px;
            margin-right: 7px;
            border-radius: 50%;
        }
        .special-content .course-item .person span{
            font-size: 12px;
            line-height: 40px;
        }
        .special-content .article{
            margin-top: -20px;
        }
        .special-content .article-item {
            display: flex;
            height: 150px;
            padding: 15px 12px;
            border-radius: 6px;
            border: solid 1px #efefef;
            margin-top: 20px;
        }
        .special-content .article-item-left{
            width: 230px;
            height: 100%;
            margin-right: 15px;
        }
        .special-content .article-item-right{
            position: relative;
            width: 672px;
            height: 100%;
        }
        .special-content .article-item-right h3 {
            font-size: 16px;
            line-height: 20px;
            letter-spacing: 1px;
            font-weight: bold;
            color: #333333;
            margin: 0;
            height: 40px;
        }
        .special-content .article-item-right .text {
            font-size: 14px;
            line-height: 20px;
            letter-spacing: 1px;
            color: #333333;
            margin-top: 8px;
            height: 80px;
        }
        .article-item-right .btm-icon {
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 0px;
            color: #707070;
            font-size: 12px;
        }
        .article-item-right .btm-icon .type {
            margin-right: 10px;
        }
        .article-item-right .btm-icon .name, .article-item-right .btm-icon .timer{
            float: right;
            margin-left: 28px;
        }
        .special-content .business {
            margin-top: -18px;
            color: #000232;
        }
        .special-content .business-item {
            position: relative;
            float: left;
            width: 222px;
            height: 160px;
            box-sizing: border-box;
            padding: 17px 12px;
            margin: 18px 18px 0 0;
            border-radius: 10px;
            border: solid 1px #efefef;
        }
        .special-content .business-item:before{
            position: absolute;
            top: 0;
            left: 34px;
            content: '';
            width: 32px;
            height: 4px;
            background-color: #c8161d;
        }
        .special-content .business-item:nth-of-type(4n){
            margin-right: 0;
        }
        .business-item .top .img-ground{
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }
        .business-item .top .img-ground img{
            border-radius: 50%;
        }
        .business-item .top {
            display: flex;
            align-items: center;
        }
        .business-item .top .text {
            margin-left: 10px;
        }
        .business-item .top .name {
            font-size: 18px;
            color: #333333;
            line-height: 1;
            font-weight: bold;
            letter-spacing: 1px;
        }
        .business-item .top .info {
            font-size: 12px;
            color: #000232;
            line-height: 1;
            margin-top: 12px;
        }
        .business-item .bottom {
            margin-top: 12px;
            font-size: 14px;
            line-height: 18px;
            letter-spacing: 1px;
        }
        .activity{
            margin-top: -26px;
        }
        .activity-item {
            position: relative;
            float: left;
            width: 300px;
            height: 260px;
            box-sizing: border-box;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            border: 1px solid #efefef;
            margin: 26px 22px 0 0;
        }
        .activity-item:nth-of-type(3n){
            margin-right: 0;
        }
        .activity-item .img-ground {
            height: 170px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            overflow: hidden;
        }
        .activity-item .activity-btm {
            margin: 9px 14px 0;
        }
        .activity-item .activity-btm .type {
            font-size: 12px;
            line-height: 12px;
            color: #333333;
            letter-spacing: 1px;
        }
        .activity-item .activity-btm .title{
            font-size: 18px;
            color: #333333;
            line-height: 24px;
            font-weight: bold;
            letter-spacing: 2px;
            margin-top: 6px;
        }
        .activity-item .activity-icon {
            position: absolute;
            top: -8px;
            left: 16px;
            width: 22px;
            height: 50px;
            color: #fff;
            font-size: 12px;
            line-height: 17px;
            background-color: #c5c5c5;
            text-align: center;
            padding: 2px 0;
        }
        .activity-item .activity-icon.active{
            background-color: #e3252d;
        }

    </style>
</head>
<body class="body-white">
<tc_include file="Public:nav"/>
<div class="main">
    <div class="top-img">
        <img src="/public/images/lantu/special-info.png" alt="">
        <p class="title moretext1">{$subject_info['category_names'][0]}</p>
    </div>
    <div style="margin-top: 32px;display: flex;">
        <div class="top-img1">
            <img src="/public/images/lantu/edit.png" alt="">
        </div>
        <div class="top-img2 top-img">
            <!--<img src="/public/images/lantu/special-info.png" alt="">-->
            <div class="text-content">
                <p class="name moretext1">{$subject_info['name']}</p>
                <p class="text moretext5">{$subject_info['policy']}</p>
            </div>
        </div>
    </div>

    <div class="special-content clearfix">
        <div class="tab special-tab">
            <!--<div class="tab-item active" tab="tab1">专题课程</div>-->
            <if condition="!empty($articles)">
                <div class="tab-item {$active == 1 ? 'active' : ''}" tab="tab2">相关文章</div>
            </if>
            <if condition="!empty($services)">
                <div class="tab-item {$active == 2 ? 'active' : ''}" tab="tab3">日新商脉</div>
            </if>
            <if condition="!empty($cases)">
                <div class="tab-item {$active == 3 ? 'active' : ''}" tab="tab4">行业案例</div>
            </if>
            <if condition="!empty($activitys)">
                <div class="tab-item {$active == 4 ? 'active' : ''}" tab="tab5">线下活动</div>
            </if>
        </div>
        <div class="special-group">
            <!--<div class="title-h3" id="tab1">专题课程</div>-->
            <!--<div class="course clearfix">-->
                <!--<div class="course-item">-->
                    <!--<a href="javascript:;">-->
                        <!--<div class="img-ground">-->
                            <!--<img src="/public/images/morning_bcg/morning-news.jpg" alt="">-->
                        <!--</div>-->
                        <!--<p class="text moretext2 ">这里是课程标题，最多显示两行最多显示两行</p>-->
                        <!--<div class="person">-->
                            <!--<img src="/public/images/morning_bcg/morning-news.jpg" alt="">-->
                            <!--<span>张恒</span>-->
                        <!--</div>-->
                    <!--</a>-->
                <!--</div>-->
                <!--<div class="course-item">-->
                    <!--<a href="javascript:;">-->
                        <!--<div class="img-ground">-->
                            <!--<img src="/public/images/morning_bcg/morning-news.jpg" alt="">-->
                        <!--</div>-->
                        <!--<p class="text moretext2 ">这里是课程标题，最多显示两行最多显示两行</p>-->
                        <!--<div class="person">-->
                            <!--<img src="/public/images/morning_bcg/morning-news.jpg" alt="">-->
                            <!--<span>张恒</span>-->
                        <!--</div>-->
                    <!--</a>-->
                <!--</div>-->
                <!--<div class="course-item">-->
                    <!--<a href="javascript:;">-->
                        <!--<div class="img-ground">-->
                            <!--<img src="/public/images/morning_bcg/morning-news.jpg" alt="">-->
                        <!--</div>-->
                        <!--<p class="text moretext2 ">这里是课程标题，最多显示两行最多显示两行</p>-->
                        <!--<div class="person">-->
                            <!--<img src="/public/images/morning_bcg/morning-news.jpg" alt="">-->
                            <!--<span>张恒</span>-->
                        <!--</div>-->
                    <!--</a>-->
                <!--</div>-->
            <!--</div>-->

            <if condition="!empty($articles)">
                <div class="title-h3" id="tab2">相关文章</div>
                <div class="article">
                    <volist name="articles" id="vo">
                        <php>
                            $smeta = json_decode($vo['smeta'], true);
                        </php>
                        <a href="{:U('Portal/Article/article_info', ['id' => $vo['id']])}">
                            <div class="article-item">
                                <div class="article-item-left">
                                    <img src="{:sp_get_asset_upload_path($smeta['thumb'])}" alt="">
                                </div>
                                <div class="article-item-right">
                                    <h3 class="moretext2">{$vo.post_title}</h3>
                                    <p class="text moretext4">{$vo.post_excerpt}</p>
                                    <div class="btm-icon">
                                        <volist name="vo.label_names" id="vo_label_name">
                                            <span>{$vo_label_name}</span>
                                        </volist>
                                        <span class="timer">{:time_format($vo['post_date'])}</span>
                                        <span class="name">{$vo.post_author_name}</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </volist>
                </div>
            </if>

            <if condition="!empty($services)">
                <div class="title-h3" id="tab3">日新商脉</div>
                <div class="business clearfix">
                    <volist name="services" id="vo">
                        <div class="business-item">
                            <a href="{:U('Service/Index/service_info', ['id' => $vo['id']])}">
                                <div class="top">
                                    <div class="img-ground">
                                        <img src="{:sp_get_image_preview_url($vo['logo'])}" alt="">
                                    </div>
                                    <div class="text">
                                        <p class="name moretext1">{$vo.company_name}</p>
                                        <p class="info">{$vo['financing']['round']}</p>
                                    </div>
                                </div>
                                <div class="bottom moretext2">{$vo.company_desc}</div>
                            </a>
                        </div>
                    </volist>
                </div>
            </if>

            <if condition="!empty($cases)">
                <div class="title-h3" id="tab4">行业案例</div>
                <div class="article">
                    <volist name="cases" id="vo">
                        <php>
                            $smeta = json_decode($vo['smeta'], true);
                        </php>
                        <a href="{:U('Portal/Article/article_info', ['id' => $vo['id']])}">
                            <div class="article-item">
                                <div class="article-item-left">
                                    <img src="{:sp_get_asset_upload_path($smeta['thumb'])}" alt="">
                                </div>
                                <div class="article-item-right">
                                    <h3 class="moretext2">{$vo.post_title}</h3>
                                    <p class="text moretext4">{$vo.post_excerpt}</p>
                                    <div class="btm-icon">
                                        <volist name="vo.label_names" id="vo_label_name">
                                            <span>{$vo_label_name}</span>
                                        </volist>
                                        <span class="timer">{:time_format($vo['post_date'])}</span>
                                        <span class="name">{$vo.post_author_name}</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </volist>
                </div>
            </if>

            <if condition="!empty($activitys)">
                <div class="title-h3" id="tab5">线下活动</div>
                <div class="activity clearfix">
                    <volist name="activitys" id="vo">
                        <div class="activity-item">
                            <a href="{$vo.link_addr}">
                                <div class="img-ground">
                                    <img src="{:sp_get_asset_upload_path($vo['thumb']['thumb'])}" alt="">
                                </div>
                                <div class="activity-btm">
                                    <p class="type">{$vo.form_type_name}</p>
                                    <p class="title moretext2">{$vo.name}</p>
                                </div>
                                <div class="activity-icon {$vo['act_status_code'] == 3 ? '' : 'active'}">{$vo.act_status}</div>
                            </a>
                        </div>
                    </volist>
                </div>
            </if>
        </div>
    </div>
</div>
<tc_include file="Public:footer"/>
<tc_include file="Public:scripts"/>
<script src="/public/js/jquery.js"></script>
<script>
    $(function () {
        // tab切换效果
        $(".special-tab .tab-item").click(function (e) {
            $(this).addClass("active").siblings().removeClass("active")
            goScrollTop(e);
        })
        $(window).on("scroll", fixedTop);
        //tab 位置固定
        function fixedTop() {
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollTop > 530){
                $(".special-tab").addClass("active");
            } else{
                $(".special-tab").removeClass("active");
            }
        }
        fixedTop();
        //点击tab-tiem 滚动条到达某位置
        function goScrollTop(e) {
            var id = e.currentTarget.getAttribute("tab")
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var totle =document.getElementById(id).offsetTop -60 - scrollTop ;
            var step =  Math.ceil(totle / 10 );
            var timer = setInterval(function () {
                if(Math.abs(step) < Math.abs(totle)){
                    window.scrollTo(0,scrollTop + step);
                    step += step;
                } else {
                    clearInterval(timer)
                    window.scrollTo(0,document.getElementById(id).offsetTop -60);
                }
            },100)
        }
    })
</script>

</body>
</html>